<template>
  <Layout>
    <div>
      <div class="header">

        <el-input placeholder="请输入广告标题" class="input-search" style="		width: 200px;" v-model="username"></el-input>
        <el-input placeholder="请输入广告内容" class="input-search" style="		width: 200px;" v-model="content"></el-input>
        <el-button type="primary" @click="getData()"><i class="el-icon-search" style="margin-right: 5px;"></i>搜索</el-button>
        <el-button type="primary" @click="handleEdit()"><i class="el-icon-edit" style="margin-right: 5px;"></i>添加</el-button>
      </div>

      <el-table :data="data" border>
        <el-table-column prop="id" label="广告ID"></el-table-column>
        <el-table-column prop="name" label="广告标题"></el-table-column>
        <el-table-column prop="content" label="广告内容"></el-table-column>
        <el-table-column prop="url" label="图片"  >
          <!-- 图片的显示 -->
          <template   slot-scope="scope">
            <img :src="scope.row.url"  min-width="70" height="70" />
          </template>
        </el-table-column>
        <el-table-column prop="position" label="广告位置"></el-table-column>
        <el-table-column prop="link" label="活动链接"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
            <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="obj.id==0?'新增数据':'编辑数据'" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="form" label-width="80px">
        <el-form-item label="ID" v-if="obj.id>0">
          <el-input v-model="obj.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="广告标题">
          <el-input v-model="obj.name"></el-input>
        </el-form-item>
        <el-form-item label="广告内容">
          <el-input v-model="obj.content"></el-input>
        </el-form-item>
        <el-form-item label="图片">
<!--          <el-input v-model="obj.url"></el-input>-->
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/uploadFile"
              :show-file-list="false"
              :on-success="handleUploadSuccess"
              :headers="headers"
              >
            <img v-if="obj.url" :src="obj.url" class="avatar">
<!--            这个是+号图标-->
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="广告位置">
          <el-input v-model="obj.position"></el-input>
        </el-form-item>
        <el-form-item label="活动链接">
          <el-input v-model="obj.link"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="edit()">确 定</el-button>
			</span>
    </el-dialog>
  </Layout>
</template>

<script>
// @ is an alias to /src
// import axios from 'axios'
import axios from '@/utils/request'
import Layout from "@/components/Layout.vue"

export default {
  components: {
    Layout
  },
  name: 'HomeView',
  data() {
    return {
      headers:{
        token:localStorage.getItem("token")
      },
      data: [],
      obj: {}, //用来临时存修改的学生数据
      dialogVisible: false ,//用来控制对话框是否显示
      username:"",
      content:''
    }
  },
  created() {
    this.getData()
  },
  methods: {
    //上传文件成功后的回调
    handleUploadSuccess(response, file){
      console.log(response.data)
      this.obj.url = response.data;
      // console.log(response, file)
    },
    //点击按钮后会触发的函数
    handleClick(item) {
      console.log(item)
      //弹出对话框
      this.$confirm('此操作将永久删除ID为' + item.id + '的学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { //点击确定
        axios.post("/banner/deleteAd", item).then(res => {
          this.$message({
            message: '恭喜你，删除成功',
            type: 'success'
          });
          this.getData()
        }).catch(e=>{
        })
      }).catch(() => { //点击取消
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    ///获取数据
    getData() {
      axios.get("/banner/list?name="+this.username+"&content="+this.content).then(res => {
        this.data = res.data
      }).catch(e=>{
      })
    },
    //弹出编辑和新增对话框
    handleEdit(item) {
      if(item){//如果传过来的参数有数据，就是编辑
        this.obj = JSON.parse(JSON.stringify(item)) //重新生成一个对象，避免修改数据会影响到表格
      }else{//新增
        this.obj ={
          id:0,
          name:"",
          content:"",
          position:"",
          url:"",
          link:""
        }
      }
      this.dialogVisible = true //显示对话框

    },
    edit() {
      this.dialogVisible = false
      // console.log(this.obj);
      let url = ""
      if(this.obj.id == 0){
        url="/banner/addAd"
      }else{
        url = "/banner/updateAd"
      }
      axios.post(url, this.obj).then(res => {
        //res就是后端返回的数据
        this.$message({
          message: '恭喜你，操作成功',
          type: 'success'
        });
        this.getData()
      }).catch(e=>{
      })
    }
  }


}
</script>
<style>
.header {
  display: flex;
  flex-direction: row;
}

.input-search {

  margin-right: 30px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: contain;
}
</style>